<template>
	<view>
		<view @tap="tapped" v-show="!active" class="input-area">
			<view v-if="textNodes.length == 0">{{placeholder}}</view>
			<scroll-view scroll-y style="height: 100%;">
				<view v-for="item in textNodes" :key="item" :index="item">{{ item }}</view>
			</scroll-view>
		</view>
		<textarea v-show="active" :placeholder="placeholder" class="input-area" ref="textarea" id="dean-textarea" @blur="cancel" v-model="text" :focus="focus" @input="$emit('input', $event.target.value)"></textarea>
	</view>
</template>

<script>
export default {
	data() {
		return {
			active: false,
			focus: false,
			text: this.value,
			textNodes: this.getNodes(this.value)
		};
	},
	watch:{
		text(n, o){
			this.textNodes = this.getNodes(n);
		},
		value(n, o){
			this.text = n;
		}
	},
	props: {
		value: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: ''
		},
		disable: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		getNodes(text) {
			if (text) return (text + '').split('\n');
			return [];
		},
		cancel() {
			this.active = false;
			this.$nextTick(() => {
				this.focus = false;
			});
		},
		tapped() {
			if(this.disable){
				return
			}
			this.active = true;
			// #ifdef MP-WEIXIN
				let wdom = wx.createSelectorQuery().in(this)
				wdom.select("#dean-textarea").boundingClientRect()
				this.focus = wdom._component.focus
			// #endif
			setTimeout(() => {
				this.focus = true;
			}, 50);
		}
	}
};
</script>

<style></style>
